<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">--%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-table.css">
<style>
	body {
		background-image: url('image/background3.jpg');
		background-size: 100% 100%;
	}

	h2 {
		text-align: center;
	}

	#myOut {
		margin-top: 200px;
	}

</style>
<script type="text/javascript" src="bootstrap/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-table.js"></script>
<!-- 对话框 -->
<script type="text/javascript" src="bootstrap/js/bootbox.js"></script>
<script type="text/javascript"
	src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
	$(function() {
		//给注册表单注册提交事件
		$("form").submit(function () {
			//获取账号
			var account= $.trim($("input[name=account]").val());
			//账号不能为空
			if(!account){
				bootbox.alert("账号不能为空!");
				return false;
			}
			//获取sp1的内容
			var sp1Txt=$.trim($("#sp1").html());
			if(sp1Txt=='已存在'){
				return false;
			}
			//姓名
			var name=$.trim($("input[name=userName]").val());;
			//姓名不能为空
			if(!name){
				bootbox.alert("用户名不能为空!");
				return false;
			}
			//性别
			var gender=$("input[name=gender]:checked").val();
			//性别不能为空
			if(!gender){
				bootbox.alert("性别不能为空!");
				return false;
			}

			//密码
			var pwd=$.trim($("input[name=pwd]").val());
			if(!pwd){
				bootbox.alert("密码不能为空!");
				return false;
			}
			//确认密码
			var confirm = $.trim($("input[name=cnfrm]").val());
			if(!confirm){
				bootbox.alert("确认密码不能为空!");
				return false;
			}
			if(pwd!=confirm){
				bootbox.alert("密码跟确认密码要保持一致!");
				return false;
			}
			return true;
		});
 		//给账号注册一个单击事件
		$("input[name=account]").blur(function() {
			//获取录入的账号
			var account=$("input[name=account]").val();
			//判断账号不为空的情况下
			if(account){
				//发送请求
				$.post("userServlet?flag=chkAccount",{'account':account},function(data){
					//判断data不为空的情况下
					if(data){
						//json字符串->对象
						var obj=eval("("+data+")");
						if (obj.result==1) {
							$("#sp1").html("已存在");
							$("#sp1").css("color","red");
						} else if(obj.result==0){
							$("#sp1").html("不存在");
							$("#sp1").css("color","green");
						}
					}
				});
			}
		}); 
	});
</script>
</head>
<body>
<div id="myOut">
	<h2>注册</h2>
	<form class="form-horizontal"
		action="${pageContext.request.contextPath}/userServlet?flag=register"
		method="post" enctype="multipart/form-data">
		<div class="form-group">
			<label for="account" class="col-md-offset-4 col-md-1 control-label">账号:</label>
			<div class="col-md-3">
				<input type="text" class="form-control" name="account"
					id="account" placeholder="账号"><span id="sp1"></span>
			</div>
		</div>
		<div class="form-group">
			<label for="userName" class="col-md-offset-4 col-md-1 control-label">用户名:</label>
			<div class="col-md-3">
				<input type="text" class="form-control" name="userName"
					id="userName" placeholder="用户名">
			</div>
		</div>
		<div class="form-group">
			<label for="gender" class="col-md-offset-4 col-md-1 control-label">性别:</label>
			<div class="col-md-3">
				<input type="radio" id="gender" name="gender" value="1" checked>男 <input
					type="radio" id="gender1" name="gender" value="0">女
			</div>
		</div>
		<div class="form-group">
			<label for="pwd" class="col-md-offset-4 col-md-1 control-label">密码:</label>
			<div class="col-md-3">
				<input type="text" class="form-control" id="pwd" name="pwd" placeholder="密码">
			</div>
		</div>
		<div class="form-group">
			<label for="cnfrm" class="col-md-offset-4 col-md-1 control-label">确认密码:</label>
			<div class="col-md-3">
				<input type="text" class="form-control" id="cnfrm" name="cnfrm"
					placeholder="密码">
			</div>
		</div>
		<div class="form-group">
			<label for="photoFile" class="col-md-offset-4 col-md-1 control-label">照片:</label>
			<div class="col-md-3">
				<input type="file" class="form-control" id="photoFile" name="photoFile"
					placeholder="照片">
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-offset-5 col-md-2">
				<button type="submit" class="btn btn-success" style="display: inline;">注册</button>
				<a href="login.jsp">
					<button type="button" class="btn btn-success" style="display: inline;">登录</button>
				</a>
			</div>
		</div>
	</form>
	${msg}
</div>
</body>
</html>